<template>
  <div class="container">
    <div class="head flex-col flex-x-center flex-y-center">
      <img class="bg" src='@/assets/images/points-back.png'>
      <span class="jifen">888</span>
      <span class="tit">当前积分余额</span>
    </div>
    <router-link  to="chongzhi" class="flex flex-row bd-bottom view">
      <div class="flex-grow-0 chongzhi">提现金额 </div>
      <div class="flex-grow-1">
      <input placeholder="输入金额" type="number" />
      </div>
    </router-link >
     <router-link to="tixian" class="flex flex-row bd-bottom view">
      <div class="flex-grow-1 chongzhi">折合人币:元</div>
    </router-link>
    <div class="bg-gray"></div>
    <button class="btn">确认提现</button>
  </div>
</template>
<script></script>
<style scoped lang="less">
.container{
  background-color:#fff;
}
.head {
  height: 10rem;
  position: relative;
  width: 100%;
  .jifen{
    font-size:2rem;
    color:#fff;
    z-index:99;
  }
  .tit{
    font-size:.5rem;
    color:#fff;
    z-index:99;
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

}
.view{
  padding:.5rem;
  background-color:#fff;
  font-size:.7rem;
  .chongzhi{
    color:#333;
    margin-right:.5rem;
  }
  input{
    border:none;
  }
  img{
    height:.8rem;
    width:.5rem;
  }
}
.bg-gray{
  height:.5rem;
  width:100%;
  background-color:#eee;
}
.btn{
  width:80%;
  margin-left:10%;
  background-color:#F75B93;
  border:none;
  padding:.5rem;
  border-radius:5px;
  margin-top:1rem;
  color:#fff;
  font-size:.7rem;
}

</style>
